<template>
  <!-- 特别价格 -->
  <div class="app-page">
    <div class="left">
      <el-form ref="form" class="form" :model="query" label-position="right" label-width="45px">
        <el-form-item label="名称">
          <el-input v-model="query.priceCgName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="机构" prop="orgSNNo">
          <el-tree-select
            v-model="query.orgSNNo"
            :clearable="false"
            class="tree-select"
            :popover-width="360"
            :select-params="{
              clearable: true,
              placeholder: '请选择组织机构',
              loading: $loadingPlugin.getTreeData
            }"
            :tree-params=" {
              'default-expand-all': true,
              'expand-on-click-node': false,
              'highlight-current': true,
              props:{
                value:'orgSNNo',
                label: 'orgName',
                disabled: 'disabled',
              },
              data: treeData
            }"
            @node-click="selectTreeChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPriceTypeTableData({})">查询</el-button>
          <el-button type="primary" @click="addPriceCategory">新增分类</el-button>
        </el-form-item>
      </el-form>
      <lb-table
        ref="lbTable"
        v-el-height-adaptive-table="{bottomOffset:10}"
        v-loading="$loadingPlugin.getPriceTypeTableData"
        class="table"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        pagination
        :total="tableData.total"
        :custom-column="false"
        align="center"
        @fetch="getPriceTypeTableData"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="content">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="报价列表" name="first">
          <quotationList ref="quotationList" :price-cg-id="priceCgId" :price-type-detail="priceTypeDetail" />
        </el-tab-pane>
        <el-tab-pane lazy label="客户信息" name="second">
          <customerInformation ref="customerInformation" :price-cg-id="priceCgId" :price-type-detail="priceTypeDetail" @changeTable="changeTable" />
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" class="price" @click="adjustPrice ">一键调价</el-button>
    </div>

    <addPriceCategory ref="addPriceCategory" @refresh="refresh" />
    <adjustPrice ref="adjustPrice" />
  </div>
</template>

<script>
  import { queryPriceType, queryPriceTypeDelete } from '@/api'
  import { mapGetters } from 'vuex'
  import getTreeData from '@/utils/jsonTree'
  import QuotationList from './components/QuotationList'
  import CustomerInformation from './components/CustomerInformation'
  import AddPriceCategory from './components/AddPriceCategory'
  import AdjustPrice from './components/AdjustPrice'

  export default {
    name: 'specialPriceManage',
    components: {
      QuotationList, CustomerInformation, AddPriceCategory, AdjustPrice
    },
    data() {
      return {
        treeData: [],
        currentOrg: null,
        activeName: 'first',
        priceCgId: null, // '报价列表查询用'
        changePrice: null,
        priceTypeDetail: {},
        query: {
          orgSNNo: '',
          priceCgName: ''
        },
        tableData: {
          total: 0,
          column: [
            {
              prop: 'priceCgName',
              label: '分类名称',
              // fixed: 'left',
              width: 150,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-dropdown>
                      <span class='el-dropdown-link'>
                        {row.priceCgName} <i class='el-icon-more'></i>
                      </span>
                      <el-dropdown-menu slot='dropdown'>
                        <el-dropdown-item>
                          <div onclick={() => this.modifyPriceCategory(row)}>修改</div>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <div onClick={() => this.del(row)}>删除</div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                )
              }
            },
            {
              prop: 'orgName',
              label: '所属机构'
            }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      // 价格分类
      async getPriceTypeTableData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          priceCgName: this.query.priceCgName,
          orgSNNo: this.query.orgSNNo,
          priceCgId: this.changePrice
        }
        for (var value in params) {
          if (!params[value]) delete params[value]
        }
        const res = await queryPriceType(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 删除
      async del(row) {
        this.$confirm('确认要删除吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const params = {
            priceCgId: row.priceCgId
          }
          const res = await queryPriceTypeDelete(params)
          if (res.success) {
            this.$message.success('删除成功')
            this.getPriceTypeTableData({})
          }
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消'
          // })
        })
      },
      // 修改价格分类
      modifyPriceCategory(row) {
        // this.$refs.modifyPriceCategory.open(row)
        this.$refs.addPriceCategory.open(row)
      },
      // 新增价格分类
      addPriceCategory() {
        this.$refs.addPriceCategory.open()
      },
      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.currentOrg = value
      },
      // 一键调价
      adjustPrice() {
        this.$refs.adjustPrice.open()
      },
      // 传分类
      async  handleCurrentChange(val) {
        console.log(val)
        if (val) {
          this.priceCgId = val.priceCgId
          this.priceTypeDetail = { ...val }
          if (this.activeName === 'first') {
            this.$nextTick(() => {
              this.$refs.quotationList.fetchData({})
            })
          } else if (this.activeName === 'second') {
            this.$nextTick(() => {
              this.$refs.customerInformation && this.$refs.customerInformation.fetchData({})
            })
          }
        }
      },
      // 刷新
      refresh() {
        this.getPriceTypeTableData({})
      },
      async changeTable(id) {
        this.changePrice = id
        await this.getPriceTypeTableData({})
        this.$nextTick(() => {
          this.changePrice = null
        })
        console.log(id, 'id')
      },
      // 点击tabs
      handleClick(tab, event) {
        // console.log(tab, event)
        var name = tab.name
        console.log(name)
        if (name === 'first') {
          this.$nextTick(() => {
            this.$refs.quotationList.fetchData({})
          })
        } else if (name === 'second') {
          this.$refs.customerInformation && this.$refs.customerInformation.fetchData({})
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;

  .left {
    width: 380px;
  }

  .content {
    position: relative;
    width: 0;
    padding: 10px 10px 0 10px;
    flex: 1;

    .price {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }

  .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & /deep/ .el-form-item {
      width: 100%;
      .el-form-item__content > .el-select {
        width: 100%;
      }
    }
    .block {
      width: 100%;
    }
  }
}
</style>
